<template>
	<view class="mons">
		<view class="list">

			<view class="li" @click='fks'>
				{{ces}}
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="textare">
				<textarea v-model="con"  :maxlength="max" placeholder="请写下您对营家商城的感受，我们将认真听取您的意见，努力提供更优质的服务。" />
				<view class="number">
					{{con.length}}/{{max}}
				</view>
			</view>
			<view class="li inli">
				<input type="text" v-model="qq"  placeholder="手机/邮箱/QQ（选填）"/>
			</view>
			<view class="textare">
				<view class="h3">
					上传图片（最多6张）
				</view>
				<view class="imgbox">
						<view class="imglis"  v-for=" (i,index) in img" :key='index'>
							<image :src="i"></image>
							<text @click='delImg(index)'>X</text>
						</view>
					
					<view class="add" @click="add">
						<image src="../../static/img/3/3-41.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="out" @click="sim">
			提交
		</view>
		<view class="meng" v-if="meng">
			<view class="tan">
				<view class="h4">
					反馈类型
					<view class="close" @click="close">
						<image src="../../static/img/3/3-1.png" mode="widthFix"></image>
					</view>
				</view>
				<scroll-view scroll-y="true" class="li-box">
					<view v-for="l in data" class="lis" :class="{'active':ce==l}" @click="check(l)">
						{{l}}
						<image src="../../static/img/3/3-43.png" mode="widthFix"></image>
					</view>
					
				</scroll-view>
				<view class="over" @click="sub">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				ce:'',
				meng:false,
				con:'',
				max:100,
				qq:'',
				data:[],
				ces:'选择反馈类型',
				img:[]
			}
		},
		onLoad() {
			var that = this
			
			that.$Request.get3(
			that.$api.httpApi.user.FeedType+'?token='+that.$SysCache.get('token'),
			).then(res=>{
				if(res.code == 1){
					that.data=res.data;
				
				}
			});
		
		},
		methods:{
			delImg(i){
				this.img.splice(i,1);
			},
			sim(){
				var that = this;
				uni.request({
					url: 'http://192.168.0.58/company/u8_shop/public/index.php/feedback',
					method: "post",
					data:{content:that.con,type:that.ces,img:this.img.join(","),contact:that.qq},
					success: function(res) {
						if(res.data.code == 1){
							uni.showToast({
								title:res.data.msg
							})
						}
					},
					})
			},
			fks(){
				this.meng=true
			},
			add(){
				var that = this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(chooseImageRes);
				        uni.uploadFile({
				            url: 'http://192.168.0.58/company/u8_shop/public/index.php/WapPutFile', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'data',
				            success: (uploadFileRes) => {
								var js = JSON.parse(uploadFileRes.data)
				                console.log(js);
								if(js.code == 1){
									if(that.img.length < 6){
										that.img.push(js.data)
									}
									
								}
				            }
				        });
				    }
				});
			},
			close(){
				this.meng=false
			},
			sub(){
				this.ces=this.ce;
				this.meng=false
			},
			check(id){
				this.ce=id;
			}
		}

	}
</script>

<style scoped>
	.imgbox{
		margin-top: 26rpx;
	}
	.imgbox .boxs{
		display: inline-block;
	}
	.imgbox .imglis{
		display: inline-block;
		width:161rpx;
		height:114rpx;
		margin-left: 6rpx;
		margin-right: 6rpx;
		position: relative;
	}
	.imgbox .imglis text{
		position: absolute;
		width: 55rpx;
		height: 55rpx;
		color: #fff;
		text-align: center;
		line-height: 55rpx;
		right: 0;
		top: 0;
		font-size: 26rpx;
	}
	.imgbox image{
		display: inline-block;
		width:161rpx;
		height:114rpx;
	}
	.imgbox .add{
		display: inline-block;
		width:161rpx;
		height:114rpx;
		margin-left: 6rpx;
		margin-right: 6rpx;
	}
	.imgbox .add image{
		margin: 0;
	}
	.textare .h3{
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(102,102,102,1);
	}
	.number{
		text-align: right;
		margin-top: 10rpx;
		font-size:20rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(183,183,183,1);
	}
	.textare{
		margin-top: 10rpx;
		background: #fff;
		padding: 28rpx;
		margin-bottom: 10rpx;
	}
		.textare textarea{
			display: block;
			width: 100%;
			height: 170rpx;
			font-size:23rpx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(183,183,183,1);
		}
	.over{
		width:613rpx;
		height:65rpx;
		background:rgba(240,64,111,1);
		border-radius:33rpx;
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(255,255,255,1);
		line-height:65rpx;
		text-align: center;
		margin: auto;
		margin-top: 32rpx;
	}
	.li-box {
		height: calc(100% - 99rpx - 170rpx);
		overflow: auto;
	}

	.li-box .lis {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999;
		width: 90%;
		margin: auto;
		height: 65rpx;
		line-height: 65rpx;
	}

	.li-box .lis image {
		width: 26rpx;
		float: right;
		margin-top: 20rpx;
		display: none;
	}

	.li-box .active {
		color: #666;
	}

	.li-box .active image {
		display: block;
	}

	.meng {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.59);
	}

	.out {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		width: 680rpx;
		height: 65rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 33rpx;
		margin: auto;
		text-align: center;
		line-height: 65rpx;
		margin-top: 80rpx;
	}

	.meng .tan {
		background: #fff;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 720rpx;
		width: 100%;
	}

	.meng .tan .h4 {
		height: 99rpx;
		border-bottom: 1px solid #d6d6d6;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 99rpx;
		text-align: center;
		position: relative;
	}

	.meng .tan .h4 .close {
		position: absolute;
		width: 99rpx;
		height: 99rpx;
		right: 0;
		top: 0;
		text-align: center;
		line-height: 99rpx;
	}

	.meng .tan .h4 .close image {
		display: inline-block;
		width: 20rpx;
		margin: auto;
	}

	.list .li {
		margin-bottom: 1px;
		background: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 35rpx;
		padding-top: 35rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.list .li .rig {
		display: inline-block;
		float: right;
	}

	.list .li .rig image {
		display: inline-block;
		width: 16rpx;
		vertical-align: middle;
		margin-left: 19rpx;
	}

	.list .li .rig text {
		display: inline-block;
		vertical-align: middle;
	}
.list .inli{
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.list .inli input{
	font-size:26rpx;
	font-family:Microsoft YaHei;
	font-weight:400;
	color:rgba(183,183,183,1);
	height: 50rpx;
}
	uni-page-body {
		height: 100%;
	}

	.mons {
		min-height: 100%;
		background: #EEEEEE;
		position: relative;
	}

	.top {
		background: url(../../static/img/3/3-35.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 65rpx;
		padding-bottom: 65rpx;
	}

	.head {
		width: 124rpx;
		height: 124rpx;
		display: block;
		background: rgba(255, 255, 255, 0.53);
		border: 1px solid rgba(255, 255, 255, 0.53);
		border-radius: 50%;
		margin: auto;
	}

	.head image {
		display: block;
		width: 102rpx;
		height: 102rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 50%;
		margin: auto;
		margin-top: 10rpx;
	}

	.name {
		text-align: center;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-top: 17rpx;
	}
</style>
